<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX之注册</title>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="s1"></span>
    <br>
    密码：<input type="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    /*需要通过键值对的形式指明
    url:传输路径，即servlet的路径
    async:是否异步 布尔值，true表示异步
    data：传输的数据 发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
        type：请求方式  POST 或 GET (默认是 GET)。
        dataType：数据类型，是预期返回值的类型 取值可以是 xml, html, js, json, text等。
        success:请求成功时调用的回调函数，就是说请求成功了就会自动调用整个方法，触发一些定义好的事件
    error：请求失败时调用的回调函数。*/
    /*AJAX的通用方式，现在的需求是，在输入用户名的时候失去焦点，输入框右边就会显示该用户名是否可用*/
    /*获取用户名输入框元素，为其绑定失去焦点事件*/
    $("#username").blur(function () {
        //获取输入的用户名，好用来传输给后台
        let username = $("#username").val();
        /*开始使用AJAX异步传输数据*/
        $.ajax(//这一步就是JQuery对象在调用Ajax方法
            {
                url: "userServlet",//路径
                async:true,//确定使用异步
                data:"username="+username,//将发送数据写好，整个格式应该是方便get方式
                type:"get",
                data_type:"text",//返回的应该是可不可以用，属于文本类型
                success:function (data) {//请求并返回成功的时候会调用这个函数,注意这个参数data就是服务器接受到异步请求之后响应回来的数据
                    $("#s1").html(data);//获取用户名输入框右边的span元素，并调用JQuery对象特有的html()方法，本着有值赋值，无值取值的原则操作
                },
                error:function () {
                    alert("操作失败，你个菜鸡！");
                }
            }
        );
    });
</script>
</html>